<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- <button v-on:click="count++">
            ++
        </button>   -->
        <!-- 缩写形式 @ -->
        <!-- <button @click="count++">
            ++
        </button> -->
        <button @click="addOne('欢迎来到对抗路','nihao ')" :style="">
            ++
        </button>
        我们model中的值变成了：{{user.age}}<br>
        请输入你的名字：
        <!-- <input type="text" :value="name" @input="updateName"/><br> -->
        <!-- 双向绑定 ：可以读取model中的值，也能实时更新-->
        <input type="text" v-model="name">
        {{name}}
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    count:0,
                    user:{
                        age:17
                    },
                    name:"nihao"
                }
            },
            // vue的里面，有一个methods的属性，我们所有的方法，都要定义到这个属性中
            methods: {
                //e是形参，用于接收view传来的实参，也可能是浏览器传给你的参数，也可能是鼠标点击事件！
                addOne(e,m){
                    //this指的就是vue的对象，this就是vm实例！
                    // console.log(this);
                    //如果view中定义的方法无参数，则形参接收鼠标事件
                    //如果view中定义的方法，有参数，那么就直接接收参数！
                    console.log(e);
                    console.log(m);
                     // 数据驱动视图，我们就一定要去修改数据！
                     //可以通过this.key获取到model中的数据key！
                    this.user.age ++;
                },
                updateName(inputEvent){
                    console.log(inputEvent);
                    if(inputEvent.inputType =='deleteContentBackward'){
                       this.name = this.name.substr(0,this.name.length-1)
                    }else{
                        this.name = this.name + inputEvent.data
                    }
                }
            },
        });
    </script>
</body>

</html>